<template>
  <view class="u-p-t-28 main-pd">
    <view class="u-card" v-if="dataList.length && !loading">
      <view class="list-item" v-for="item in dataList" :key="item.id">
        <view class="u-flex u-m-b-16 u-flex-between">
          <view class="font-32">{{ item.xqName || "" }}</view>
          <view class="color-8c8c8c font-28">{{ item.applyTime || "" }}</view>
        </view>
        <view class="u-flex u-flex-between u-flex-items-center">
          <view class="u-flex u-flex-items-center">
            <view :class="[applyClass(item.state), 'status']">{{
              applyStatus(item.state)
            }}</view>
            <view
              class="u-m-l-24"
              v-if="item.state == 2"
              @click="checkReason(item)">
              <u-image
                src="@/static/images/icon19.png"
                width="32rpx"
                height="32rpx"></u-image>
            </view>
          </view>
          <view
            class="color-bfbfbf font-24"
            @click="$u.route('/pagesB/yzzz/applyDetail', { id: item.id })"
            >查看详情</view
          >
        </view>
      </view>
    </view>
      <view v-show="loading">
        <u-skeleton rows="5" title loading></u-skeleton>
      </view>
      <view class="empty-con">
        <u-empty mode="list" :show="!dataList.length && !loading"></u-empty>
      </view>
    <u-modal
      :show="show"
      title="审查不通过原因"
      confirmColor="#f34b47"
      @confirm="show = false">
      <view class="text-c font-28 color-595959">{{ reason }}</view>
    </u-modal>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getywhListApi } from "@/api/index";
import { useList } from "@/hooks/useList";
import { onLoad } from "@dcloudio/uni-app";
const { loadData, dataList, page, loading } = useList({
  listApi: getywhListApi,
});
// 查看不通过原因
let reason = ref("");
const checkReason = (param) => {
  reason.value = param.reason;
  show.value = true;
};
// 申请状态判断
const applyStatus = computed((status) => {
  return function (status) {
    let statusArr = ["审查中", "审查通过", "审查未通过"];
    return statusArr[status];
  };
});
const applyClass = computed((status) => {
  return function (status) {
    return "status" + status;
  };
});
let show = ref(false);
onLoad(() => {
  page.value = 1;
  dataList.value = [];
  loadData();
});
</script>

<style lang="scss" scoped>
.status {
  width: 132rpx;
  height: 40rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status0 {
  background-color: #fef6e6;
  color: #faad14;
}

.status1 {
  background-color: #edf9e8;
  color: #52c41a;
}

.status2 {
  background-color: #ffedee;
  color: #ff4d4f;
}
</style>
